/*compass wrapper*/
.compass-wrapper {
  padding: 5px 2px 5px 2px !important; 
  justify-content:center;
  height:auto;
}

/*compass flex class*/
.compass-flex {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  position:relative;
  perspective: 300px;
  transform-style: preserve-3d;
}

/*class for elements  within compass flex
they will be moved using script*/
.compass-component {
  position: absolute;
  background-color: red !important;
  top: 2px;
  height: 36px;
  width: 10%;
  text-align: center;
  will-change: transform;
  /*transform-origin: center center;*/
  
  /*disable selecting text*/
  -moz-user-select: -moz-none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}